<script setup>
import { ref, watch } from 'vue'
import SongListCard from '@/components/SongListCard/SongListCard.vue'
import { onSearchApi } from '@/apis/search.js'
import { ElMessage } from 'element-plus'
import bus from '@/utils/bus'

const props = defineProps({
  searchName: {
    type: String
  }
})

// 搜索结果
const searchList = ref([])
// 触底加载
const isPlayListLoad = ref(false)
const loadSearchPlayList = async () => {
  bus.emit('changeIsLoading', true)
  const { data } = await onSearchApi(props.searchName, 1000, 48, searchList.value.length)
  bus.emit('changeIsLoading', false)
  if (data.result.playlistCount === 0) {
    isPlayListLoad.value = true
    return ElMessage('到底啦')
  }
  searchList.value.push(...data.result.playlists)
}

// 搜索词变化时，触发搜索
watch(() => props.searchName, async () => {
  const { data } = await onSearchApi(props.searchName, 1000, 48, searchList.value.length)
  searchList.value = data.result.playlists
})
</script>

<template>
  <div class="play-lists" v-infinite-scroll="loadSearchPlayList" :infinite-scroll-disabled="isPlayListLoad"
    :infinite-scroll-delay="500" :infinite-scroll-distance="400">
    <template v-for="list in searchList" :key="list.id">
      <Router-link :to="`/playList/${list.id}`">
        <SongListCard :song="list" />
      </Router-link>
    </template>
  </div>
  <div class="bottom" v-if="isPlayListLoad">
    —————————— 到底线了 ——————————
  </div>
</template>

<style scoped lang='scss'>
.play-lists {
  padding-right: -5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  div {
    margin: 25px 7px;
  }
}

.bottom {
  line-height: 80px;
  text-align: center;
  color: #aaa;
}
</style>
